<script>
import { defineComponent, ref } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    MailOutlined,
    AppstoreOutlined,
    SettingOutlined,
  },
  setup() {
    const active = ref(['1']);
    const listArray = ref([
 
    {
    name: 'promise',
    routeName:'on',
    id:'1'
  },
  {
    name: '垂直居中',
    routeName:'one',
    id:'2'
  },
  {
    name: '模块高度',
    routeName:'two',
    id:'3'
  },
  {
    name: '表单组件步骤条',
    routeName:'three',
    id:'4'
  },
  {
    name: '密码输⼊组件',
    routeName:'four',
    id:'5'
  },
])
    return {
      active,
      listArray
    };
  },
});
</script>
<template>
  <header>
    <div class="wrapper">
    <a-menu v-model:selectedKeys="active" mode="horizontal">
    <a-menu-item :key="item.id" v-for="item in listArray">
      <template #icon>
        <mail-outlined />
      </template>
        <router-link :to="item.routeName">{{item.routeName}}</router-link>
    </a-menu-item>
    </a-menu>
    <router-view></router-view>
    </div>
  </header>
</template>

<style lang="less" scoped>
</style>
